<template>
  <div>
    <!-- 
      v-on:事件名 绑定事件
      需求 绑点击事件 click
      v-on:click
     -->
    <h1>v-on</h1>
    <h2>我的钱 - {{ money }} 元</h2>
    <!-- 执行少量代码 每次加10元 -->
    <button v-on:click="money += 10" >加零花钱 加10</button>
    <!-- methods中的函数名 每次加20元 -->
    <button v-on:click="addMoney">加零花钱 加20</button>
    <!-- methods中的函数名 传实参 -->
    <button v-on:click="handleAddMoney(1000)">加零花钱</button>

    <hr>
    <hr>
    <!-- v-on:事件名 => 简写成 @事件名 -->
    <button @click="money += 10" >加零花钱 加10</button>
    <!-- methods中的函数名 每次加20元 -->
    <button @click="addMoney">加零花钱 加20</button>
    <!-- methods中的函数名 传实参 -->
    <button @click="handleAddMoney(1000)">加零花钱</button>
  </div>
</template>

<script>
export default {
  // data属性是个函数 提供数据 （除了data选项是函数 其他基本都是对象）
 data () {
  // 返回的数据，会挂载到我们vue组件实例上，可以通过this访问
  return {
    // this.money可以访问
    money: 100,
    // 注意我们提供方法的时候不是写在data选项 data选项提供数据
    // addMoney: function () {

    // },
  }
 },
 // 提供方法 就是个对象
 methods: {
  addMoney () {
    // 加20块
    console.log('add money', this.money);
    this.money += 20
  },
  handleAddMoney(val) {
    // this指向 组件实例 就能拿到对应的数据和方法
    console.log(val, this);
    // this.money += val
    this.addMoney()
  }
 }
}
</script>

<style>

</style>